<template>
    <div>
        <h1>App</h1>
        <input type="text" v-model="info.name">{{ info.name }}
    </div>
</template>
<script setup>
/*
    reactive
    1. 只对对象设置
    2. 修改和访问无需value属性
    3. 深层响应
    shallowReactive
    1. 取消深层响应
    2. 只响应到第一层对象属性
*/
import { ref, shallowRef, reactive, shallowReactive } from 'vue';
// const info = reactive({ name: 'jack', age: 20, size: { w: 100, h: 200 } });
const info = shallowReactive({ name: 'jack', age: 20, size: { w: 100, h: 200 } });

console.log(info.name);
console.log(info.size.w);



</script>

<style>
div {
    border: solid;
    padding: 10px;
}
</style>